<template>
	<view style="padding-bottom: 150upx;">
		<view class="content margin-bottom-lg">
			<view class="padding-bottom-lg">
				<view class="flex justify-between align-center padding-tb solid-bottom">
					<view class="flex">
						<view class="avatar">
							<image :src="article.author.avatar" class="w-100" mode="widthFix"></image>
						</view>
						<view class="flex flex-direction justify-center padding-lr"
							@click="toUserCenter(article.author.id)">
							<view class="text-lg text-bold text-black">{{article.author.username}}</view>
							<view class="text-sm">{{article.author.bio}}</view>
						</view>
					</view>
					<view @click="follow">
						<view v-if="article.author.isFollowed" class="unfollow-btn">已关注</view>
						<view v-else class="follow-btn">+ 关注</view>
					</view>
				</view>

				<view class="margin-top padding-bottom-lg">
					<view class="text-bold text-xxl text-black">{{article.title}}</view>
					<view class="flex justify-between padding-tb-sm text-grey text-sm">
						<view>{{String(article.published_at).substring(0,10)}}</view>
						<view>{{article.article_category.name}}</view>
					</view>
					<rich-text :nodes="getContent"></rich-text>
				</view>


			</view>

			<view class="margin-top-sm">
				<comment ref="comment" :article="id"></comment>
			</view>
		</view>



		<view class="bottom-bar flex padding">
			<view class="flex align-center justify-between w-100">
				<view class="flex comment-input text-grey" @click="toComment">输入评论</view>
				<view class="flex icons align-center">
					<view @click="collect">
						<image v-if="article.collectionStatus" src="../../static/icons/collection-yellow.svg"
							mode="widthFix"></image>
						<image v-else src="../../static/icons/collection.svg" mode="widthFix"></image>
					</view>
					<view @click="dianzan">
						<image v-if="article.dianzanStatus" src="../../static/icons/dianzan-blue.svg" mode="widthFix">
						</image>
						<image v-else src="../../static/icons/dianzan.svg" mode="widthFix"></image>
					</view>
					<view class="text-grey" v-if="article.dianzanCount"><text>{{ article.dianzanCount }}</text></view>
				</view>
			</view>
		</view>


		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<userCollection ref="userCollection" @createCollectionSucceed="createCollectionSucceed"
				:articleId="article.id"></userCollection>
		</uni-popup>


	</view>
</template>

<script>
	import article from "../../api/modules/article";

	export default {
		data() {
			return {
				id: '',
				article: {},
        readTime: Date.now(),
			}
		},
		onLoad(options) {
			this.id = options.id
		},
    onReady(){
      setTimeout(() =>{
        this.$api.readArticle(this.id).then(res =>{
          console.log(res)
        })
      },2000)
    },
		onShow() {
			this.getArticleById(this.id)
      this.readTime = Date.now()
		},
    onUnload(){
      this.logTime()
    },
    onHide(){
      this.logTime()
    },
		computed: {
			getContent() {
				return '<div style=\'color:black\'>' + String(this.article.html)
					.replace(/<img/gi, '<img style=\'max-width:100%;height:auto\'')
					.replace(/<p/gi, '<p style=\'line-height:1.5rem; font-size:1rem;\'') +
					'</div>'
			}

		},
		methods: {
			open() {
				this.$refs.userCollection.getCollectionCategory()
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
      logTime(){
        let time = Date.now() - this.readTime;
        if (time < 60 * 60 * 1000){
          this.$api.logTime(this.id, time).then(res =>{
            console.log(res)
            this.readTime = Date.now()
          })
        }
      },
			toUserCenter(id) {
				uni.navigateTo({
					url: "../person/center?id=" + id,
				})
			},
			getArticleById(id) {
				this.$api.getArticleById(id).then(res => {
					this.article = res
				}).then(() => {
					uni.setNavigationBarTitle({
						title: this.article.title
					})
				})
			},
			dianzan() {
				if (this.article.dianzanStatus) {
					this.$api.unDianzanArticle(this.article.id).then(res => {
						console.log(res)
						this.article.dianzanStatus = !this.article.dianzanStatus
						this.article.dianzanCount--
					})
				} else {
					this.$api.dianzanArticle(this.article.id).then(res => {
						console.log(res)
						this.article.dianzanStatus = !this.article.dianzanStatus
						this.article.dianzanCount++
					})
				}
			},
			collect() {
				if (!this.article.collectionStatus) {
					this.open()
				} else {
					this.$api.deleteCollectionByArticleId(this.article.id).then(res => {
						console.log(res)
						this.article.collectionStatus = !this.article.collectionStatus
					})
				}
			},
			follow() {
				if (this.article.author.isFollowed) {
					this.$api.unfollow(this.article.author.id).then(res => {
						console.log(res)
						this.article.author.isFollowed = !this.article.author.isFollowed
					})
				} else {
					this.$api.follow(this.article.author.id).then(res => {
						console.log(res)
						this.article.author.isFollowed = !this.article.author.isFollowed
					})
				}
			},
			toComment() {
				this.$refs.comment.commentArticle()
			},
			createCollectionSucceed() {
				this.close()
				this.article.collectionStatus = !this.article.collectionStatus
			}
		}
	}
</script>

<style lang="scss">
	.avatar {
		width: 100upx;

		image {
			border-radius: 500upx;
		}
	}

	.follow-btn {
		border: solid 1upx;
		padding: 10upx 20upx;
		border-radius: 10upx;
		color: #0081ff;

	}

	.unfollow-btn {
		border: solid 1upx;
		padding: 10upx 20upx;
		border-radius: 10upx;
		color: white;
		background-color: #38c800;
	}


	.content {
		>view {
			padding: 20upx 35upx;
			background-color: white;
		}
	}

	.bottom-bar {
		height: 100upx;
		width: 100vw;
		background-color: #fff;
		box-shadow: rgba(0, 0, 0, 0.1) 0px -5px 12px;
		bottom: 0;
		position: fixed;
		z-index: 9;
	}

	.comment-input {
		background-color: #F5F5F5;
		width: 100%;
		padding: 15upx 40upx;
		margin-right: 20upx;
		border-radius: 50upx;
	}

	.icons {
		display: flex;

		image {
			flex-shrink: 0;
			width: 50upx;
			margin-left: 15upx;
		}

		text {
			padding-left: 10upx;
		}
	}
</style>
